<template>
  <div class="ces-main">
    <search-form
      ref="form"
      size="mini"
      label-width="50px"
      :search-data="searchData"
      :search-form="searchForm"
      :search-handle="searchHandle"
    />
    <ces-table
      size="mini"
      :is-selection="true"
      :is-index="true"
      :is-pagination="true"
      :is-handle="true"
      :table-data="tableData"
      :table-cols="tableCols"
      :pagination="pagination"
      @refresh="handleCurrentChange"
    />
  </div>
</template>

<script>
// import {
//   getTableAndForm // 获取资产目录详情下的数据展示的动态表格和表单
// } from '@/api/assetsManage/table/index.js'
// import {
//   getQuery // 查询接口
// } from '@/api/assetsManage/assets/index.js'

// 引入组件
import SearchForm from '@/components/Form'
import cesTable from '@/components/Table'

export default {

  components: { // 引入组件后注册组件
    cesTable,
    SearchForm
  },
  data() {
    // 表单查询一般分为input，下拉框，和日期，下面是下拉框时的设置下拉信息的情况，我的项目没有用到，但是留着方便看
    const sexs = [{ label: '男', value: 'M' }, { label: '女', value: 'F' }]
    const sexProps = { label: 'label', value: 'value' }
    return {
      searchData: { // 查询表单的对应的值
        // name:'',
        // sex:null,
      },
      searchForm: [ // 这里是渲染查询表单的表头和类型的数据
        { type: 'Input', label: '姓名', prop: 'name', width: '180px', placeholder: '请输入姓名...' },
        { type: 'Select', label: '性别', prop: 'sex', width: '180px', options: sexs, props: sexProps, change: row => '', placeholder: '请选择性别...' }
      ],
      searchHandle: [ // 查询和重置按钮
        { label: '查询', type: 'primary', handle: this.handleQuery },
        { label: '重置', type: 'primary', handle: this.handleReset }
      ],
      apiId: 'null',
      fieldList: [],
      // 表格
      tableData: [
        { name: '张三', age: 123 },
        { name: '里斯', age: 22 },
        { name: '王武', age: 33 },
        { name: '张三', age: 123 },
        { name: '里斯', age: 22 },
        { name: '王武', age: 33 },
        { name: '张三', age: 123 },
        { name: '里斯', age: 22 },
        { name: '王武', age: 33 },
        { name: '张三', age: 123 },
        { name: '里斯', age: 22 },
        { name: '王武', age: 33 },
        { name: '张三', age: 123 },
        { name: '里斯', age: 22 },
        { name: '王武', age: 33 }
      ], // 表格数据
      tableCols: [ // 表格列数据
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' }
      ],
      tableHandles: [ // 这是表格和表单之间的一个按钮，我的项目不需要
        { label: '新增', type: 'primary', handle: row => '' }
      ],
      pagination: { // 分页数据
        pageSize: 10,
        pageNum: 1,
        total: 0
      }

    }
  },
  mounted() {
    this.getTableAndForm()
  },
  methods: {
    // 此方法是点击分页时触发的查询，
    handleCurrentChange() {
      this.getQuery()
    },
    // 获取表格和表单数据
    async getTableAndForm() {
      // ...
    },

    // 查询
    getQuery() {
      // ...
    },
    handleQuery() { // 查询
      this.getQuery()
    },
    handleReset() { // 重置
      for (var i in this.searchData) {
        this.$set(this.searchData, i, '')
      }
      this.getQuery()
    }
  }
}
</script>

<style lang="scss" scoped>
.ces-main{
  padding: 20px;
}
</style>
